$(function () {
  //1,给input 表单设置 鼠标按下事件,
  //同时判断按下的是不是回车键
  $("#title").on("keydown", function (e) {
    if (e.keyCode === 13) {
      // 判断当里面的数值为空的时候,提醒用户正确输入
      //   设置一个变量来简便里面的值
      var value = $(this).val().trim();
      if (value === "") {
        return alert("请重新输入");
      }
      //   同时创建一个函数,将获取到的值放入里面
      var obj = {
        title: value,
        done: false,
      };
      //    设置一个变量来获取本地数据
      var data = getData();
      // 然后再把获取的数据追加到 这个变量里面
      data.unshift(obj);
      setData(data);
      renDer();
      $(this).val("");
    }
  });

  //  设置一个函数获取本地数据
  function getData() {
    // 判断如果本地数据为空,就返回空数组 ,
    //如果里面有数据则获取出来,用 retrun 返回  返回的时候将数据转换成对象
    return JSON.parse(localStorage.getItem("todo")) || [];
  }
  // 设置一个函数,将数据存到本地 注意 存入本地的时候是存数组
  function setData(data) {
    localStorage.setItem("todo", JSON.stringify(data));
  }
  // 现在将获取到的数据渲染到页面上
  function renDer() {
    // 同理先获取本地数据再将值渲染到页面
    data = getData();
    // ol 和 ul 的值先去空,然后再往里面追加
    var ol = "";
    var ul = "";
    // 然后将数据遍历,加入到 ol 和 ul 里面
    $.each(data, function (i, item) {
      if (data[i].done) {
        ul += `
        <li>
        <input type = "checkbox" checked>
        <p> ${item.title} </p>
        <a href = "javascript:;" index = '${i}'> </a>
        </li>       
        `;
      } else {
        ol += `
     <li>
     <input type = "checkbox">
     <p> ${item.title} </p>
     <a href = "javascript:;" index = '${i}'> </a>
     </li>   
    `;
      }
    });
    $("ol").html(ol);
    $("ul").html(ul);
  }
  renDer();
  //  再判断  当 ol 里面为选中的时候 成为 ul 里面的数值
  //


  
  $("ol ,ul").on("click", "input", function () {
    //    先获取数据
    data = getData();
    //    获取当前li 的索引号,用 a 来获取 自定义索引
    var index = $(this).siblings("a").attr("index");
    // 本地数据
    data[index].done = $(this).prop("checked");
    // 更新页面数据
    setData(data);
    // 最后再渲染页面
    renDer();
  });
    

  $('ol ,ul').on('click', 'a',function(){   
     if(confirm('你确定要删除吗')){
      data = getData();
      data.splice($(this).parent('li'),1)
     }   
      // 更新页面数据
      setData(data);
      // 最后再渲染页面
      renDer();
  })

});
